<template>
	<view class="invite-page" :style="{ 'background-image': `url(${bgUrl})` }">
		<!-- <mBack @getGameResult="handleBack" v-if="!friendId"></mBack> -->
		<view class="m-title" :style="{ 'margin-top': (menuButtonInfo.top + menuButtonInfo.height + 94) + 'rpx' }">
			{{ friendId ? friendName + '邀请你' : '邀请你的另一半' }}
		</view>
		<view class="m-title sub-title">
			开启甜蜜之旅
		</view>

		<view class="show-img-box">
			<image class="img-content" src="https://cdn.osisx.com/runse/images/two-person.png" mode="aspectFill">
			</image>
		</view>
		<view class="bottom-btn flex-row-center-center">
			<view class="btn-content flex-row-center-center" @click="handleAcceptInvite" v-if="friendId">
				接受邀请
			</view>
			<button open-type="share" class="btn-content flex-row-center-center" v-else>
				邀请
			</button>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import mBack from "@/components/m-test/index.vue"
	import {
		getUserFriends,
		acceptInvite
	} from "@/api/mbti.js"
	import {
		login
	} from "@/utils/mbti-login.js"
	import socketService from './socket.js';
	export default {
		components: {
			mBack
		},
		data() {
			return {
				bgUrl: "https://cdn.osisx.com/runse/images/bg.png",
				// "9ac65159-a716-4637-9a38-342a925e16ca"
				friendId: null,
				friendName: null,
				hasRegister: true

			};
		},
		computed: {
			...mapGetters(['menuButtonInfo', 'userInfo'])
		},
		onLoad(options) {
			if (options) {
				this.friendId = options.friendId ? options.friendId : this.friendId
				this.friendName = options.friendName ? options.friendName : this.friendName
			}
		},
		onShow() {
			this.handleCheckLogin()
		},
		mounted() {
			// 朋友同意邀请
			socketService.on('userAcceptInvite', (res) => {
				console.log("邀请已经被接收", res)
				uni.showToast({
					// res.msg
					title: "对方已接受邀请",
					icon: "none"
				})
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/runChat/runChat"
					})
				}, 1000)

			})

		},
		methods: {
			async handleCheckLogin() {
				let res = await login()
				if (!res.hasRegister) {
					if (!this.friendId) {
						uni.navigateTo({
							url: "/pages/runChat/collectInformation"
						})
					}
					this.hasRegister = false
					return
				} else {
					this.hasRegister = true
				}
				if (!socketService.isConnected && this.userInfo) {
					socketService.connect(this.userInfo.userId)
				}
				try {
					let res = await getUserFriends({
						userId: this.userInfo.userId
					})
					if (res.data.friends.length) {
						socketService.disconnect()
						uni.reLaunch({
							url: "/pages/runChat/runChat"
						})
					}
				} catch (error) {
					//TODO handle the exception
				}
			},
			async handleAcceptInvite() {
				if (!this.hasRegister) {
					uni.navigateTo({
						url: "/pages/runChat/collectInformation"
					})
					return
				}
				uni.showLoading()
				acceptInvite({
					userId: this.userInfo.userId,
					friendId: this.friendId
				}).then(res => {
					uni.hideLoading()
					let {
						code,
						msg
					} = res
					if (code == 1 || code == 2) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						return
					}
					socketService.emit('userAcceptInvite', {
						userId: this.userInfo.userId,
						friendId: this.friendId
					})
					socketService.disconnect()
					uni.reLaunch({
						url: "/pages/runChat/runChat"
					})
				}).catch(err => {
					uni.hideLoading()
				})
			},
			handleBack() {
				uni.navigateBack()
			},
			handleInvite() {
				if (this.friendId) {
					// 接受邀请

				}
			}
		}
	}
</script>

<style lang="scss">
	.invite-page {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		overflow: hidden;

		.m-title {
			width: 100%;
			height: 72rpx;
			font-family: "MiSans-Medium";
			font-weight: 500;
			font-size: 54rpx;
			color: #272F5F;
			line-height: 72rpx;
			margin-bottom: 8rpx;
			padding: 0px 48rpx;

		}

		.show-img-box {
			width: 100%;
			padding: 0px 26rpx;
			margin-bottom: 140rpx;

			.img-content {
				aspect-ratio: 1 / 1;
				width: 100%;
				height: auto;
			}
		}

		.sub-title {
			margin-bottom: 100rpx;
			font-family: "MiSans-Light";
			font-weight: 300;
		}

		.bottom-btn {
			width: 100%;
			padding: 0rpx 118rpx;

			.btn-content {
				flex: 1;
				height: 86rpx;
				background: linear-gradient(135deg, #FE85EB 0%, #616CFF 100%);
				color: #FFFFFF;
				border-radius: 46rpx;

				font-family: "MiSans-Normal";
				font-weight: 400;
				font-size: 34rpx;
				line-height: 86rpx;

				&::after {
					border: none !important;
					content: none !important;
					display: none !important;
				}

			}


		}
	}
</style>